<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="../loader/loader.css">
        <link rel="stylesheet" href="grid.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="../checkbox/checkbox.js"></script>
        <script src="grid.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope) {
                $rootScope.title = 'Tree';
                $rootScope.option = {
                    api       : './tree.demo.json',
                    childIndex: 'submenu',
                    column    : [{
                        text : '菜单名',
                        name : 'name',
                        ratio: 3,
                        tree : true
                    }, {
                        text: '图标',
                        name: 'icon'
                    }, {
                        text    : '是否子节点',
                        name    : 'isLeaf',
                        renderer: function (row) {
                            if (row.isLeaf) {
                                return '是';
                            }
                            return '否';
                        }
                    }, {
                        text: '链接',
                        name: 'sref'
                    }, {
                        text : '操作列',
                        items: [{
                            icon   : 'glyphicon-edit',
                            handler: function (o, row, rowIndex) {
                                console.log(o);
                                console.log(row);
                                console.log(rowIndex);
                            }
                        }, {
                            icon   : 'glyphicon-remove-circle',
                            handler: function (o, row, rowIndex) {
                                console.log(o);
                                console.log(row);
                                console.log(rowIndex);
                            }
                        }]
                    }]
                };
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" ng-bind="title"></h1>
            <p>
                <button class="btn btn-default" ng-click="myGrid.reload()">刷新</button>
            </p>
            <div style="width: 100%;height: 300px;">
                <a-tree-grid option="option" name="myGrid"></a-tree-grid>
            </div>
        </div>
    </body>
</html>